<script setup>
    import { onMounted } from 'vue'
    import { getVideoList } from '@/common/apis'
    import PlayVideo from './PlayVideo.vue'

    let resData = $ref([
    {
        "id": "1582206234772140034",
        "createBy": "admin",
        "createTime": "2022-10-18 11:05:37",
        "updateBy": null,
        "updateTime": null,
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "环境保护与可持续发展",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/分组31_1666062332214.png",
        "fileDate": "2022-10-18",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/环境保护与可持续发展_1666061657240.mp4",
        "des": null,
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1582212107506577409",
        "createBy": "admin",
        "createTime": "2022-10-18 11:28:57",
        "updateBy": "admin",
        "updateTime": "2022-10-18 14:36:12",
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "交通知识",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/分组7copy3_1666064568196.png",
        "fileDate": "2022-10-15",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/2.交通知识_1666074357283.mp4",
        "des": "",
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1582215251837874178",
        "createBy": "admin",
        "createTime": "2022-10-18 11:41:26",
        "updateBy": null,
        "updateTime": null,
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "疫情防控及生活常识",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/分组7copy3_1666063798984.png",
        "fileDate": "2022-10-13",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/3.疫情防控及生活常识_1666063827559.mp4",
        "des": null,
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1579660624264720386",
        "createBy": "admin",
        "createTime": "2022-10-11 10:30:16",
        "updateBy": "admin",
        "updateTime": "2022-10-18 10:45:21",
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "家庭防火要注意哪些方面",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/分组6copy_1665818255486.png",
        "fileDate": "2022-10-11",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/234169762-1-192_1666053562027.mp4",
        "des": "",
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1579660717340520450",
        "createBy": "admin",
        "createTime": "2022-10-11 10:30:38",
        "updateBy": "admin",
        "updateTime": "2022-10-18 09:45:30",
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "交通安全警示录",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/分组7copy_1665818276701.png",
        "fileDate": "2022-10-07",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/10月18日_1666057176465.mov",
        "des": "",
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1580730658869805058",
        "createBy": "admin",
        "createTime": "2022-10-14 09:22:12",
        "updateBy": "admin",
        "updateTime": "2022-10-18 10:45:36",
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "国家网络安全宣传周",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/分组5copy2_1665818266215.png",
        "fileDate": "2022-10-05",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/824407617-1-208_1666056529547.mp4",
        "des": "",
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1582187600368660482",
        "createBy": "admin",
        "createTime": "2022-10-18 09:51:34",
        "updateBy": "admin",
        "updateTime": "2022-10-18 09:53:08",
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "防火安全无小事，时时处处需留心！发生火灾，如何对症下药？",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/分组7copy2_1666057769360.png",
        "fileDate": "2022-09-30",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/432218148-1-192_1666057789113.mp4",
        "des": "",
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1581126079723098114",
        "createBy": "admin",
        "createTime": "2022-10-15 11:33:28",
        "updateBy": null,
        "updateTime": null,
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "网络安全之虚假购物",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/WechatIMG1793_1665804799924.png",
        "fileDate": "2022-09-15",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/虚假购物_1665804662820.mp4",
        "des": null,
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1581128899503345665",
        "createBy": "admin",
        "createTime": "2022-10-15 11:44:40",
        "updateBy": "admin",
        "updateTime": "2022-10-15 11:45:11",
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "防溺水知识科普，学会自救和如何救人",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/未标题-1拷贝_1665805476153.jpg",
        "fileDate": "2022-08-26",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/mda-ngu2qjn850k6pquh_1665805281709.mp4",
        "des": "",
        "type_dictText": "安全宣传视频"
    },
    {
        "id": "1581124826129575938",
        "createBy": "admin",
        "createTime": "2022-10-15 11:28:29",
        "updateBy": "admin",
        "updateTime": "2022-10-15 11:28:47",
        "sysOrgCode": "A01",
        "type": "1",
        "biaoti": "枣庄119消防宣传月启动 现场演练高空救援",
        "img": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/WechatIMG461_1665804443198.png",
        "fileDate": "2022-08-10",
        "url": "https://tengcity.oss-cn-beijing.aliyuncs.com/upload/mda-kk8nt2fb5m9b35px_1665804495446.mp4",
        "des": "",
        "type_dictText": "安全宣传视频"
    }
])
    let dataLoading = $ref(false)
    // onMounted(() => {
    //     getVideoList({ type: 1 }).then(res => {
    //         dataLoading = false
    //         resData = res.result.records
    //     })  
    // })

    let playVideo = $ref(null)
    const handleClick = (item) => {
        playVideo.showVideoDialog(item)
    }

</script>

<template>
    <div class="card-box dark promotion-video-wrap mt10">
        <card-title title="宣传视频"></card-title>

        <el-scrollbar class="list-wrap">
            <ul 
                class="item flex" 
                v-for="(item, index) in resData" 
                :key="index"
                @click="handleClick(item)"
            >
                <li class="index">{{ index+1 }}</li>
                <li class="title">{{ item.biaoti }}</li>
                <li class="date">{{ item.fileDate }}</li>
            </ul>
        </el-scrollbar>

    </div>

    <play-video ref="playVideo"></play-video>
</template>

<style lang="scss" scoped>
    @import "../../assets/css/common.scss";

    .promotion-video-wrap{
        height: 306px;
        
        .list-wrap{
            height: 250px;
            padding: 20px 15px;

            .item{
                color: #fff;
                padding: 10px 0;
                cursor: pointer;

                li{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: 10px;
                }

                .index{
                    width: 30px;
                }

                .title{
                    flex: 1;
                }

                .date{
                    width: 100px;
                    text-align: right;
                }
            }
        }
    }

</style>